<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>设计模式</title>
    <script>
        window.onload = function(){
            //x.stopPropagation();//阻止时间冒泡

            //原始模式
            var person = new Object();
            person.name = 'Hanley';
            person.showName = function(){
                console.log(this.name);
            };
            person.showName();

            //工厂模式
            function people(name,age){
                var obj = new Object();
                obj.name = name;
                obj.age = age;
                obj.showName = function(){
                    return this.name;
                }
                return obj;
            }
            var p1 = people('Hanley',22)// 缺点:全部是Object类型

            //构造函数模式
            function Animal(name,age){
                this.name = name;
                this.age = age;
                this.showName = function(){
                    return this.name;
                }
            };
            var animal = new Animal('Cat',2);//每次需要重新创建方法

            //构造函数模式2
            function Tomcat(name,age){
                this.name = name;
                this.age = age;
                this.showName = showName;
            };
            function showName(){
                return this.name;
            }
            var animal = new Tomcat('Cat',2);

            //混合模式
            function Dog(name,age){
                this.name = name;
                this.age = age;

            };
            Dog.prototype.showName = function(){
                return this.name;
            }
            var dog = new Dog('ddog',2);


            //单例模式
            function createWindow(){
            }
            var window = (function(){
                var div;
                function hasDiv(){
                    if(!div){
                        div = document.createElement("div");
                        div.innerHTML = "Hello World";
                        div.style.display = "none";
                    }
                    return div;
                }
            })();
            document.getElementById("btn").onclick = function(){
                var str = createWindow();
                str.style.display = 'block';
            }

            //观察者模式（订阅模式）
            //发布者
            //  1)添加一个缓存列表,用于存入订阅者回调函数
            //  2)遍历缓存列表 
            var mobj = {};;
            mobj.lists = [];
            mobj.listen = function(fn){//订阅者信息
                mobj.lists.push(fn);
            }
            mobj.trigger = function(){//发布消息
                for(var i=0,fn; fn=this.lists[i++];){
                    fn.apply(this,arguments)//arguments内置属性，类似array
                }
                
                // for(var i=0; i<this.lists.length; i++){
                //     var fn;
                //     fn = this.lists[i];
                //     fn.apply(this,arguments);
                // }
            }
            mobj.listen(function(color,size){//Rose
                console.log('姓名:Rose');
                console.log('颜色:'+color);
                console.log('尺寸:'+size);
            });
            mobj.listen(function(color,size){//Hanley
                console.log('姓名:Hanley');
                console.log('颜色:'+color);
                console.log('尺寸:'+size);
            });
            //发布消息
            mobj.trigger('红色','M')


            //适配器模式
            //自行车 bike   人驱动 Hdrive
            //电动车 ebike  电驱动 Edrive
            
            //自行车抽象
            var Bike = function(){}
            Bike.prototype.wheel = function(){
                throw new Error('错误');
            }
            Bike.prototype.Hdrive = function(){
                throw new Error('错误');
            }
            //电动车抽象
            var Ebike = function(){}
            Ebike.prototype.wheel = function(){
                throw new Error('错误');
            }
            Ebike.prototype.Hdrive = function(){
                throw new Error('错误');
            }

            //自行车实现
            var RealizeBike = function(){}
            RealizeBike.prototype = new Bike();
            RealizeBike.prototype.wheel = function(){
                console.log('自行车2个轮子');
            }
            RealizeBike.prototype.Hdrive = function(){
                console.log('自行车靠人力驱动');
            }
            //电动车实现
            var RealizeEbike = function(){}
            RealizeEbike.prototype = new Ebike();
            RealizeEbike.prototype.wheel = function(){
                console.log('电动车2个轮子');
            }
            RealizeEbike.prototype.Hdrive = function(){
                console.log('电动车靠电力驱动');
            }

            var BikeAdapter = function(o){
                this.o = o;
            }
            BikeAdapter.prototype = new Ebike();
            BikeAdapter.prototype.Edrive = function(){
                this.o.wheel();
                this.o.Hdrive();
                console.log(this.o);
            };
            var b1 = new RealizeBike();
            var e1 = new RealizeEbike();
            var aa = new BikeAdapter(b1);
            aa.Edrive();

        }
    </script>
</head>
<body>
    <div>
        <input type="button" id="btn" value="Click" />
    </div>
</body>
</html>